---
import '@orbitkit/assets/fonts/stylesheet.css'
import '@/styles/globals.css'

import GeistMono from '@orbitkit/assets/fonts/GeistMonoVariable.ttf'
import GeistSans from '@orbitkit/assets/fonts/GeistVariable.ttf'

import { consts } from '@/consts'

interface Props {
  title?: string
  description?: string
  image?: string
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site)

const {
  title = consts.site.title,
  description = consts.site.description,
  image = consts.site.previewImage,
} = Astro.props
---

<!-- Global Metadata -->
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width,initial-scale=1' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='generator' content={Astro.generator} />

<!-- Font preloads -->
<link rel='preload' href={GeistSans} as='font' type='font/ttf' crossorigin />
<link rel='preload' href={GeistMono} as='font' type='font/ttf' crossorigin />

<!-- Canonical URL -->
<link rel='canonical' href={canonicalURL} />

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name='title' content={title} />
<meta name='description' content={description} />

<!-- Open Graph / Facebook -->
<meta property='og:type' content='website' />
<meta property='og:url' content={Astro.url} />
<meta property='og:title' content={title} />
<meta property='og:description' content={description} />
<meta property='og:image' content={new URL(image, Astro.url)} />

<!-- Twitter -->
<meta property='twitter:card' content='summary_large_image' />
<meta property='twitter:url' content={Astro.url} />
<meta property='twitter:title' content={title} />
<meta property='twitter:description' content={description} />
<meta property='twitter:image' content={new URL(image, Astro.url)} />

<script is:inline>
  const theme = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme') || ''
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark'
    }
    return 'light'
  })()

  if (theme === 'light') {
    document.documentElement.classList.remove('dark')
  } else {
    document.documentElement.classList.add('dark')
  }

  window.localStorage.setItem('theme', theme)
</script>
